<template>
  <div class="category-posts-content">
    <!-- 页面头部 -->
    <header class="category-header">
      <button class="back-button" @click="goBack">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div class="header-content">
        <h1 class="category-title">{{ currentCategory.name }}</h1>
        <p class="category-desc">{{ currentCategory.description }}</p>
      </div>
      <div class="category-stats">
        <span class="stat-item">{{ allPosts.length }} 个讨论</span>
        <span class="stat-item">{{ getTotalViews() }} 次浏览</span>
      </div>
    </header>

    <!-- 筛选和排序 -->
    <div class="filter-section">
      <div class="filter-options">
        <select v-model="sortBy" class="sort-select" @change="sortPosts">
          <option value="time">最新发布</option>
          <option value="views">最多浏览</option>
          <option value="replies">最多回复</option>
        </select>
        <div class="view-toggle">
          <button 
            :class="['view-btn', { active: viewMode === 'list' }]" 
            @click="viewMode = 'list'"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M8 6H21M8 12H21M8 18H21M3 6H5M3 12H5M3 18H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            列表
          </button>
          <button 
            :class="['view-btn', { active: viewMode === 'grid' }]" 
            @click="viewMode = 'grid'"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M4 3H10V9H4V3ZM14 3H20V9H14V3ZM4 11H10V17H4V11ZM14 11H20V17H14V11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            网格
          </button>
        </div>
      </div>
      <button class="create-post-btn" @click="createNewPost">发布新讨论</button>
    </div>

    <!-- 帖子列表 -->
    <div v-if="allPosts.length === 0" class="empty-state">
      <svg class="empty-icon" width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47683 9.24644 5 7.5 5C4.46243 5 2 7.46243 2 10.5C2 13.5376 4.46243 16 7.5 16C9.24644 16 10.8321 15.5232 12 14.7472M12 6.25278C13.1679 5.47683 14.7536 5 16.5 5C19.5376 5 22 7.46243 22 10.5C22 13.5376 19.5376 16 16.5 16C14.7536 16 13.1679 15.5232 12 14.7472" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <h3>暂无讨论</h3>
      <p>该分类下还没有讨论话题，快来发布第一个话题吧！</p>
    </div>

    <!-- 列表视图 -->
    <div v-else-if="viewMode === 'list'" class="posts-list">
      <div 
        v-for="post in sortedPosts" 
        :key="post.id"
        class="post-card list-view"
        @click="handlePostClick(post.id)"
      >
        <div class="post-header">
          <img :src="post.avatar" alt="用户头像" class="post-avatar">
          <div class="post-author-info">
            <span class="post-author">{{ post.author }}</span>
            <span class="post-time">{{ post.time }}</span>
          </div>
          <div class="post-meta-small">
            <span class="post-views-small">{{ post.views }} 浏览</span>
            <span class="post-replies-small">{{ post.replies }} 回复</span>
          </div>
        </div>
        <h4 class="post-title">{{ post.title }}</h4>
        <p class="post-excerpt">{{ post.content }}</p>
        <div class="post-meta">
          <div class="post-tags">
            <span v-for="tag in getPostTags(post.id)" :key="tag" class="post-tag">{{ tag }}</span>
          </div>
          <div class="post-stats">
            <span class="post-views">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#666"/>
              </svg>
              {{ post.views }}
            </span>
            <span class="post-replies">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ post.replies }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 网格视图 -->
    <div v-else class="posts-grid">
      <div 
        v-for="post in sortedPosts" 
        :key="post.id"
        class="post-card grid-view"
        @click="handlePostClick(post.id)"
      >
        <h4 class="post-title">{{ post.title }}</h4>
        <p class="post-excerpt">{{ post.content }}</p>
        <div class="post-meta">
          <div class="post-author-info-small">
            <img :src="post.avatar" alt="用户头像" class="post-avatar-small">
            <span class="post-author">{{ post.author }}</span>
            <span class="post-time">{{ post.time }}</span>
          </div>
          <div class="post-tags">
            <span v-for="tag in getPostTags(post.id).slice(0, 2)" :key="tag" class="post-tag">{{ tag }}</span>
            <span v-if="getPostTags(post.id).length > 2" class="post-tag-more">+{{ getPostTags(post.id).length - 2 }}</span>
          </div>
          <div class="post-stats">
            <span class="post-views">{{ post.views }} 浏览</span>
            <span class="post-replies">{{ post.replies }} 回复</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div v-if="allPosts.length > 0" class="load-more-section">
      <button class="load-more-btn" @click="loadMorePosts">加载更多</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const { categoryId } = route.params

// 论坛分类数据
const forumCategories = [
  { id: 'pets', name: '宠物', description: '关于宠物的一切问题' },
  { id: 'beauty', name: '美妆', description: '美妆护肤技巧分享' },
  { id: 'knowledge', name: '知识', description: '各种实用知识分享' },
  { id: 'electronics', name: '电子产品', description: '数码设备使用与推荐' },
  { id: 'education', name: '教育', description: '学习方法与教育资源' },
  { id: 'health', name: '健康医疗', description: '健康知识与医疗咨询' },
  { id: 'finance', name: '金融理财', description: '理财知识与投资建议' },
  { id: 'travel', name: '旅游', description: '旅行攻略与目的地推荐' }
]

// 模拟的帖子数据
const mockPosts = {
  pets: [
    { id: '101', title: '如何训练狗狗定点大小便？', content: '家里的狗狗总是随地大小便，有什么有效的训练方法吗？已经尝试了一些方法但效果不佳。', author: '爱宠人士', avatar: 'https://picsum.photos/200/200?random=1', views: 789, replies: 123, time: '今天' },
    { id: '102', title: '猫咪掉毛严重怎么办？', content: '每到换毛季，家里到处都是猫毛，有什么好的解决办法吗？', author: '猫咪铲屎官', avatar: 'https://picsum.photos/200/200?random=2', views: 654, replies: 98, time: '昨天' },
    { id: '103', title: '养宠物需要准备哪些物品？', content: '第一次养宠物，不知道需要准备哪些必备物品，求推荐！', author: '新手铲屎官', avatar: 'https://picsum.photos/200/200?random=3', views: 521, replies: 87, time: '2天前' },
    { id: '104', title: '狗狗饮食应该注意什么？', content: '不同品种的狗狗饮食需求有什么不同？日常应该如何搭配食物？', author: '宠物营养师', avatar: 'https://picsum.photos/200/200?random=4', views: 456, replies: 76, time: '3天前' },
    { id: '105', title: '猫咪性格与品种关系分析', content: '不同品种的猫咪性格有什么特点？如何根据自己的生活习惯选择适合的猫咪？', author: '猫咪专家', avatar: 'https://picsum.photos/200/200?random=5', views: 890, replies: 145, time: '4天前' },
    { id: '106', title: '狗狗常见疾病预防指南', content: '狗狗容易患哪些常见疾病？如何提前预防？', author: '宠物医生', avatar: 'https://picsum.photos/200/200?random=6', views: 765, replies: 132, time: '5天前' }
  ],
  beauty: [
    { id: '201', title: '新手如何化日常妆容？', content: '作为化妆新手，想学习简单的日常妆容，有什么推荐的教程或产品吗？', author: '美妆小白', avatar: 'https://picsum.photos/200/200?random=4', views: 890, replies: 145, time: '今天' },
    { id: '202', title: '如何选择适合自己的护肤品？', content: '面对众多护肤品品牌和产品，不知道如何选择适合自己肤质的，求指导。', author: '护肤达人', avatar: 'https://picsum.photos/200/200?random=5', views: 765, replies: 123, time: '昨天' },
    { id: '203', title: '敏感肌肤护理心得分享', content: '自己是敏感肌肤，经过多年摸索总结了一些护理经验，希望能帮助到大家。', author: '敏感肌患者', avatar: 'https://picsum.photos/200/200?random=6', views: 654, replies: 108, time: '2天前' },
    { id: '204', title: '夏日防晒全攻略', content: '夏天如何有效防晒？不同肤质应该如何选择防晒产品？', author: '防晒专家', avatar: 'https://picsum.photos/200/200?random=7', views: 987, replies: 167, time: '3天前' },
    { id: '205', title: '口红颜色如何搭配肤色', content: '不同肤色适合什么颜色的口红？如何根据场合选择合适的口红？', author: '彩妆师', avatar: 'https://picsum.photos/200/200?random=8', views: 876, replies: 156, time: '4天前' },
    { id: '206', title: '熬夜肌肤急救方法', content: '经常熬夜，皮肤状态不好，有什么快速改善的方法吗？', author: '熬夜党', avatar: 'https://picsum.photos/200/200?random=9', views: 1234, replies: 210, time: '5天前' }
  ],
  knowledge: [
    { id: '301', title: '如何提高阅读效率？', content: '想读更多的书，但阅读速度太慢，有什么方法可以提高阅读效率吗？', author: '爱书人', avatar: 'https://picsum.photos/200/200?random=7', views: 678, replies: 112, time: '今天' },
    { id: '302', title: '家庭网络如何搭建更稳定？', content: '家里网络总是不稳定，尤其是多个设备同时使用时，有什么好的解决方案吗？', author: '网络工程师', avatar: 'https://picsum.photos/200/200?random=8', views: 543, replies: 98, time: '昨天' },
    { id: '303', title: '新手如何学习编程？', content: '零基础想学习编程，应该从哪种语言开始学起？有什么好的学习资源推荐吗？', author: '编程入门', avatar: 'https://picsum.photos/200/200?random=9', views: 789, replies: 134, time: '2天前' },
    { id: '304', title: '有效记忆方法分享', content: '如何提高记忆力？有哪些科学有效的记忆技巧？', author: '记忆大师', avatar: 'https://picsum.photos/200/200?random=10', views: 1023, replies: 187, time: '3天前' },
    { id: '305', title: '基础理财知识入门', content: '理财小白应该如何开始理财？有哪些基础的理财工具和产品？', author: '理财顾问', avatar: 'https://picsum.photos/200/200?random=11', views: 987, replies: 176, time: '4天前' },
    { id: '306', title: '时间管理四象限法则', content: '如何运用四象限法则进行有效的时间管理？实际应用中有哪些技巧？', author: '效率专家', avatar: 'https://picsum.photos/200/200?random=12', views: 876, replies: 165, time: '5天前' }
  ],
  electronics: [
    { id: '401', title: '如何选择适合的笔记本电脑？', content: '想买一台新的笔记本电脑，主要用于办公和轻度游戏，有什么推荐吗？', author: '数码小白', avatar: 'https://picsum.photos/200/200?random=13', views: 890, replies: 145, time: '今天' },
    { id: '402', title: '手机摄影技巧分享', content: '如何用手机拍出专业水准的照片？有哪些好用的摄影APP推荐？', author: '摄影爱好者', avatar: 'https://picsum.photos/200/200?random=14', views: 1234, replies: 210, time: '昨天' },
    { id: '403', title: '智能家居设备选购指南', content: '想打造智能家居，从哪些设备开始比较好？有什么性价比高的产品推荐？', author: '科技达人', avatar: 'https://picsum.photos/200/200?random=15', views: 765, replies: 132, time: '2天前' },
    { id: '404', title: '耳机选购全攻略', content: '市面上耳机种类繁多，降噪耳机、蓝牙耳机、有线耳机该如何选择？', author: '音频发烧友', avatar: 'https://picsum.photos/200/200?random=16', views: 890, replies: 145, time: '3天前' },
    { id: '405', title: '电脑故障排查基础', content: '电脑出现问题时，如何进行简单的故障排查和维修？', author: '电脑爱好者', avatar: 'https://picsum.photos/200/200?random=17', views: 765, replies: 132, time: '4天前' },
    { id: '406', title: '平板vs笔记本如何选择？', content: '纠结于买平板还是笔记本，它们各自的优缺点是什么？', author: '数码纠结症', avatar: 'https://picsum.photos/200/200?random=18', views: 890, replies: 145, time: '5天前' }
  ],
  education: [
    { id: '501', title: '如何培养孩子的学习兴趣？', content: '孩子对学习没有兴趣，作为家长应该如何引导和培养？', author: '家长求助', avatar: 'https://picsum.photos/200/200?random=16', views: 987, replies: 167, time: '今天' },
    { id: '502', title: '大学生如何规划课余时间？', content: '大学课余时间很多，如何合理规划才能让自己更充实？', author: '大学新生', avatar: 'https://picsum.photos/200/200?random=17', views: 876, replies: 156, time: '昨天' },
    { id: '503', title: '如何提高英语口语水平？', content: '学了多年英语，但口语一直不敢开口，有什么快速提升的方法吗？', author: '英语学习者', avatar: 'https://picsum.photos/200/200?random=33', views: 890, replies: 145, time: '2天前' },
    { id: '504', title: '学习压力大如何缓解？', content: '面对考试和学习压力，常常感到焦虑，有什么好的解压方法吗？', author: '压力山大', avatar: 'https://picsum.photos/200/200?random=34', views: 1023, replies: 187, time: '3天前' },
    { id: '505', title: '如何培养孩子的阅读习惯？', content: '想让孩子爱上阅读，从小培养良好的阅读习惯，有什么好方法吗？', author: '用心的家长', avatar: 'https://picsum.photos/200/200?random=35', views: 987, replies: 167, time: '4天前' },
    { id: '506', title: '考研备考全攻略', content: '准备考研，如何制定有效的复习计划？有什么备考经验分享吗？', author: '考研党', avatar: 'https://picsum.photos/200/200?random=36', views: 1234, replies: 210, time: '5天前' }
  ],
  health: [
    { id: '601', title: '办公室久坐如何保护颈椎？', content: '长时间在办公室久坐，颈椎经常疼痛，有什么保护和缓解的方法吗？', author: '办公室白领', avatar: 'https://picsum.photos/200/200?random=18', views: 1023, replies: 187, time: '今天' },
    { id: '602', title: '如何科学减重？', content: '想健康地减轻体重，有什么科学的方法和建议吗？', author: '健身爱好者', avatar: 'https://picsum.photos/200/200?random=19', views: 1234, replies: 210, time: '昨天' },
    { id: '603', title: '每日饮水指南', content: '每天应该喝多少水？什么时候喝水最健康？', author: '健康顾问', avatar: 'https://picsum.photos/200/200?random=24', views: 890, replies: 145, time: '2天前' },
    { id: '604', title: '春季过敏怎么办？', content: '每到春季就容易过敏，打喷嚏、流鼻涕，有什么好的缓解方法吗？', author: '过敏患者', avatar: 'https://picsum.photos/200/200?random=25', views: 765, replies: 123, time: '3天前' },
    { id: '605', title: '如何改善睡眠质量？', content: '经常失眠，睡眠质量差，第二天精神不好，有什么改善的方法吗？', author: '失眠困扰者', avatar: 'https://picsum.photos/200/200?random=26', views: 1123, replies: 198, time: '4天前' },
    { id: '606', title: '中医养生小常识', content: '想了解一些简单实用的中医养生方法，日常生活中如何调理身体？', author: '中医爱好者', avatar: 'https://picsum.photos/200/200?random=37', views: 1023, replies: 187, time: '5天前' },
    { id: '607', title: '办公室健康小贴士', content: '长期久坐办公室，有什么保持健康的小贴士？如何缓解颈椎和腰椎疼痛？', author: '办公室白领', avatar: 'https://picsum.photos/200/200?random=38', views: 1234, replies: 210, time: '6天前' },
    { id: '608', title: '儿童营养与健康', content: '如何为孩子提供均衡的营养？儿童健康成长需要注意哪些问题？', author: '关注儿童健康', avatar: 'https://picsum.photos/200/200?random=39', views: 987, replies: 167, time: '1周前' },
    { id: '609', title: '季节性疾病预防', content: '不同季节容易发生哪些疾病？如何做好季节性预防？', author: '养生达人', avatar: 'https://picsum.photos/200/200?random=40', views: 876, replies: 156, time: '1周前' },
    { id: '610', title: '家庭急救常识', content: '日常生活中应该掌握哪些基本的家庭急救知识？急救箱应该准备什么？', author: '安全意识强', avatar: 'https://picsum.photos/200/200?random=41', views: 1345, replies: 223, time: '1周前' }
  ],
  finance: [
    { id: '701', title: '新手如何开始基金投资？', content: '想开始投资基金，但不知道从何入手，有什么入门建议吗？', author: '投资小白', avatar: 'https://picsum.photos/200/200?random=20', views: 890, replies: 145, time: '今天' },
    { id: '702', title: '年轻人如何合理规划收入？', content: '刚工作不久，如何合理分配收入，既保证生活质量又能有所储蓄？', author: '职场新人', avatar: 'https://picsum.photos/200/200?random=21', views: 765, replies: 132, time: '昨天' },
    { id: '703', title: '如何选择适合自己的保险？', content: '市面上保险种类繁多，不知道如何选择适合自己的保险产品。', author: '保险咨询', avatar: 'https://picsum.photos/200/200?random=27', views: 987, replies: 167, time: '2天前' },
    { id: '704', title: '如何建立应急储备金？', content: '应急储备金应该存多少？放在哪里比较合适？', author: '理财规划师', avatar: 'https://picsum.photos/200/200?random=28', views: 876, replies: 156, time: '3天前' },
    { id: '705', title: '如何避免消费陷阱？', content: '现在促销活动很多，经常忍不住冲动消费，有什么方法可以理性消费？', author: '理性消费者', avatar: 'https://picsum.photos/200/200?random=29', views: 1023, replies: 187, time: '4天前' }
  ],
  travel: [
    { id: '801', title: '国内小众旅行目的地推荐', content: '不想去热门景点人挤人，有什么小众但风景优美的旅行目的地推荐吗？', author: '旅行达人', avatar: 'https://picsum.photos/200/200?random=22', views: 987, replies: 167, time: '今天' },
    { id: '802', title: '旅行行李打包技巧', content: '每次旅行都带太多东西，有什么高效的行李打包方法吗？', author: '经常出差', avatar: 'https://picsum.photos/200/200?random=23', views: 876, replies: 156, time: '昨天' },
    { id: '803', title: '如何制定旅行预算？', content: '计划一次旅行，如何合理制定预算，既玩得开心又不会超支？', author: '预算旅行家', avatar: 'https://picsum.photos/200/200?random=30', views: 765, replies: 132, time: '2天前' },
    { id: '804', title: '旅途中如何保证安全？', content: '一个人旅行，安全是首要考虑的问题，有什么安全小贴士吗？', author: '独自旅行者', avatar: 'https://picsum.photos/200/200?random=31', views: 890, replies: 145, time: '3天前' },
    { id: '805', title: '如何拍出好看的旅行照片？', content: '旅行中想拍出美美的照片，但摄影技术有限，有什么简单的技巧吗？', author: '旅行摄影爱好者', avatar: 'https://picsum.photos/200/200?random=32', views: 1023, replies: 187, time: '4天前' }
  ]
}

// 帖子标签数据
const postTags = {
  // 宠物类帖子标签
  '101': ['狗狗训练', '新手教程', '行为纠正'],
  '102': ['猫咪护理', '换毛季', '清洁技巧'],
  '103': ['养宠准备', '新手必读', '宠物用品'],
  '104': ['狗狗饮食', '营养搭配', '健康饲养'],
  '105': ['猫咪品种', '性格分析', '选猫指南'],
  '106': ['疾病预防', '宠物健康', '医疗知识'],
  
  // 美妆类帖子标签
  '201': ['日常妆容', '新手教程', '快速上妆'],
  '202': ['护肤品选择', '肤质判断', '产品推荐'],
  '203': ['敏感肌肤', '护理心得', '产品避雷'],
  '204': ['防晒技巧', '夏日护肤', '防晒产品'],
  '205': ['口红搭配', '彩妆技巧', '色彩搭配'],
  '206': ['熬夜护理', '急救护肤', '皮肤修复'],
  
  // 知识类帖子标签
  '301': ['阅读技巧', '效率提升', '学习方法'],
  '302': ['网络优化', '家庭网络', '故障排除'],
  '303': ['编程学习', '入门指南', '资源推荐'],
  '304': ['记忆方法', '学习技巧', '大脑训练'],
  '305': ['理财入门', '投资基础', '财务规划'],
  '306': ['时间管理', '效率工具', '工作方法'],
  
  // 电子产品类帖子标签
  '401': ['笔记本选购', '数码产品', '办公设备'],
  '402': ['手机摄影', '摄影技巧', 'APP推荐'],
  '403': ['智能家居', '设备选购', '科技生活'],
  '404': ['耳机选购', '音频设备', '音质体验'],
  '405': ['电脑维修', '故障排查', 'DIY'],
  '406': ['产品对比', '平板', '笔记本'],
  
  // 用户发布的帖子标签
  'user-post-1': ['宠物训练', '狗狗', '正向激励'],
  'user-post-2': ['护肤品推荐', '保湿', '敏感肌'],
  'user-post-3': ['学习方法', '效率提升', '番茄工作法'],
  
  // 教育类帖子标签
  '501': ['教育方法', '学习兴趣', '亲子关系'],
  '502': ['时间规划', '大学生活', '自我提升'],
  '503': ['英语口语', '语言学习', '发音练习'],
  '504': ['压力管理', '心理健康', '考试焦虑'],
  '505': ['阅读习惯', '亲子阅读', '儿童教育'],
  '506': ['考研备考', '复习计划', '经验分享'],
  '201_edu': ['学习方法', '成绩提升', '教育咨询'],
  
  // 健康类帖子标签
  '601': ['颈椎保护', '办公室健康', '职业病预防'],
  '602': ['科学减重', '健康生活', '饮食运动'],
  '603': ['健康饮水', '日常保健', '生活习惯'],
  '604': ['过敏防护', '春季健康', '过敏体质'],
  '605': ['睡眠改善', '失眠治疗', '生活质量'],
  '606': ['中医养生', '调理身体', '传统中医'],
  '607': ['办公室健康', '颈椎保护', '久坐族'],
  '608': ['儿童健康', '营养均衡', '成长发育'],
  '609': ['季节性疾病', '疾病预防', '季节养生'],
  '610': ['家庭急救', '急救知识', '安全健康'],
  
  // 金融类帖子标签
  '701': ['基金投资', '理财入门', '投资策略'],
  '702': ['收入规划', '理财建议', '年轻人理财'],
  '703': ['保险选择', '保障规划', '风险管理'],
  '704': ['应急储备', '财务安全', '资金管理'],
  '705': ['理性消费', '消费习惯', '省钱技巧'],
  
  // 旅行类帖子标签
  '801': ['小众目的地', '旅行推荐', '深度游'],
  '802': ['行李打包', '旅行技巧', '收纳方法'],
  '803': ['旅行预算', '省钱旅行', '财务规划'],
  '804': ['旅行安全', '独自旅行', '安全提示'],
  '805': ['旅行摄影', '摄影技巧', '记录生活']
}

// 响应式数据
const currentCategory = ref(forumCategories.find(cat => cat.id === categoryId) || {
  id: categoryId, 
  name: categoryId || '未知分类', 
  description: '暂无描述'
})

const allPosts = ref([])
const sortBy = ref('time')
const viewMode = ref('list')
const displayedPosts = ref(10) // 初始显示的帖子数量

// 计算排序后的帖子列表
const sortedPosts = computed(() => {
  const posts = [...allPosts.value]
  
  switch (sortBy.value) {
    case 'views':
      return posts.sort((a, b) => b.views - a.views)
    case 'replies':
      return posts.sort((a, b) => b.replies - a.replies)
    case 'time':
    default:
      // 假设时间格式可以排序，实际项目中可能需要更复杂的时间处理
      return posts.sort((a, b) => {
        const timeOrder = ['今天', '昨天', '2天前', '3天前', '4天前', '5天前']
        return timeOrder.indexOf(a.time) - timeOrder.indexOf(b.time)
      })
  }
})

// 加载当前分类的帖子
const loadAllPosts = () => {
  // 获取模拟数据
  const mockData = mockPosts[categoryId] || []
  
  // 从本地存储加载用户发布的帖子 - 尝试从多个可能的键名获取
  let userPosts = []
  const possibleKeys = ['posts', 'userPosts']
  
  for (const key of possibleKeys) {
    try {
      const storedPosts = localStorage.getItem(key)
      if (storedPosts) {
        const posts = JSON.parse(storedPosts)
        // 确保只过滤出当前分类的用户帖子
        const filteredPosts = posts.filter(post => post.category === categoryId)
        userPosts = [...userPosts, ...filteredPosts]
      }
    } catch (error) {
      console.error(`从 ${key} 加载用户帖子数据失败:`, error)
    }
  }
  
  // 合并所有帖子
  allPosts.value = [...userPosts, ...mockData]
}

// 加载更多帖子
const loadMorePosts = () => {
  displayedPosts.value += 10
}

// 处理帖子点击
const handlePostClick = (postId) => {
  router.push(`/post/${postId}?category=${categoryId}`)
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 创建新帖子
const createNewPost = () => {
  router.push(`/new-post?category=${categoryId}`)
}

// 获取帖子标签
const getPostTags = (postId) => {
  return postTags[postId] || []
}

// 获取总浏览量
const getTotalViews = () => {
  return allPosts.value.reduce((total, post) => total + post.views, 0)
}

// 排序帖子
const sortPosts = () => {
  // 排序逻辑在computed中实现
}

// 页面加载时初始化
onMounted(() => {
  loadAllPosts()
})
</script>

<style scoped>
/* 分类帖子页面内容区域 */
.category-posts-content {
  flex: 1;
  padding: 20px;
  min-height: 100vh;
}

/* 页面头部 */
.category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px;
  border-bottom: 2px solid #e67e22;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #f5f5f5;
}

.header-content {
  flex: 1;
}

.category-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.category-desc {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.category-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.stat-item {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-options {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.sort-select:focus {
  border-color: #e67e22;
}

.view-toggle {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 2px;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn.active {
  background-color: white;
  color: #e67e22;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.create-post-btn {
  padding: 10px 20px;
  background-color: #e67e22;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.create-post-btn:hover {
  background-color: #d35400;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.empty-icon {
  color: #ccc;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 8px 0;
}

.empty-state p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* 列表视图样式 */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.post-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.post-card.list-view {
  /* 列表视图特定样式已在基础样式中定义 */
}

.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.post-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-author {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.post-time {
  font-size: 12px;
  color: #999;
}

.post-meta-small {
  display: flex;
  gap: 16px;
}

.post-views-small,
.post-replies-small {
  font-size: 12px;
  color: #999;
}

.post-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.post-excerpt {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.post-tag {
  padding: 4px 10px;
  background-color: #f0f0f0;
  color: #666;
  border-radius: 12px;
  font-size: 12px;
  transition: background-color 0.2s;
}

.post-tag:hover {
  background-color: #e0e0e0;
}

.post-tag-more {
  padding: 4px 10px;
  background-color: #e67e22;
  color: white;
  border-radius: 12px;
  font-size: 12px;
}

.post-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

.post-views,
.post-replies {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

/* 网格视图样式 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.post-card.grid-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card.grid-view .post-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.post-card.grid-view .post-excerpt {
  -webkit-line-clamp: 3;
  margin-bottom: 12px;
  flex: 1;
}

.post-author-info-small {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.post-avatar-small {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.post-card.grid-view .post-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.post-card.grid-view .post-stats {
  width: 100%;
  justify-content: space-between;
}

/* 加载更多按钮 */
.load-more-section {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.load-more-btn {
  padding: 10px 30px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.load-more-btn:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .category-stats {
    align-items: flex-start;
  }
  
  .filter-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .filter-options {
    justify-content: space-between;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
  }
}
</style>